<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>注册</title>
    <link rel="stylesheet" href="./assets/css/mui.min.css">
    <!-- 自定义的公共样式表 -->
    <link rel="stylesheet" href="./assets/css/lib.common.css">
    <!-- 页面样式 -->
    <link rel="stylesheet" href="./assets/css/app.css">
    <script src="./assets/js/mui.min.js"></script>
    <!-- 点击复制文本 -->
    <script src="./assets/js/clipboard.min.js"></script>
    <!-- 自定义的js脚本 -->
    <script src="./assets/js/lib.common.js"></script>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    [endif]-->
</head>
<body class="bg-white">
<!-- 头部start -->
<div class="mui-row login-header">
    <div class="mui-col-sm-12 mui-col-xs-12 p_x20 p_y25">
        <a url="./登录.html" class="f_l head-bar-search">
            <img src="./assets/image/xhdpi-v4/arrow_left.png">
        </a>
    </div>
    <div class="mui-col-sm-12 mui-col-xs-12 login-header-icon">
        <img src="./assets/image/xhdpi-v4/icon.png">
    </div>
</div>
<!-- 头部end -->

<form id="form" action="">
    <div class="mui-row login-content">
        <div class="mui-col-sm-12 mui-col-xs-12 p_x25 p_t25">
            <div class="mui-input-group p_t25">
                <div class="mui-input-row">
                    <label class="a_r">
                        <i class="mui-icon mui-icon-phone bold"></i>
                    </label>
                    <input type="text" id="mobile" name="mobile" class="mui-input-clear font14" placeholder="请输入手机号码">
                </div>
                <div class="mui-input-row">
                    <label class="a_r">
                        <i class="mui-icon mui-icon-compose bold"></i>

                    </label>
                    <span>
                        <input type="text" name="code" style="width: 120px;" class="font14" placeholder="验证码">
                    </span>
                    <button type="button" class="font12 line25 mui-btn-link" id="getCode">
                        获取验证码
                    </button>

                </div>
                <div class="mui-input-row">
                    <label class="a_r">
                        <i class="mui-icon mui-icon-locked bold"></i>
                    </label>
                    <input type="password" name="password" class="mui-input-password font14" placeholder="请输入新密码">
                </div>
            </div>
        </div>
        <div class="mui-col-sm-12 mui-col-xs-12 p_x25 p_y25">
            <button type="button" onclick="__submit('#form')"
                    class="w100 mui-btn mui-btn-primary line30 font16 radius20">重置密码
            </button>
        </div>
    </div>
</form>

</body>
</html>
<script>
    // 发送手机验证码
    mui(document).on('tap', '#getCode', function (e) {
        let mobile = document.querySelector('#mobile').value;
        if (new RegExp(/^1\d{10}$/).test(mobile)) {
            __get(e.target.href, {
                mobile: document.querySelector('#mobile').value
            })
        } else {
            mui.toast('手机号码不正确')
        }

        // 发送验证码倒计时
        sendCodeTiming(e.target, 60);
    })
</script>